<template>
  <div class="visitor">
    <el-form label-width="100px"
             class="demo-ruleForm"
             label-position="top"
             :model="ruleForm"
             :rules="rules"
             ref="ruleForm">
      <el-form-item :label="$t('configLazyLoad.channel.responseTime')" prop="break_len">
        <el-input v-model="ruleForm.break_len">
          <template slot="append">{{$t('public.minutes2')}}</template>
        </el-input>
        <p>{{$t('configLazyLoad.visitorWaitConfig.default10Min')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.stopTime')" prop="break_tips_len">
        <el-input v-model="ruleForm.break_tips_len">
          <template slot="append">{{$t('public.minutes2')}}</template>
        </el-input>
        <p>{{$t('configLazyLoad.channel.stopTip')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.stopTip2')">
        <el-input v-model="ruleForm.break_tips" type="textarea"
></el-input>
        <p>{{$t('configLazyLoad.channel.stopTip3')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.enableComment')">
        <el-radio-group v-model="ruleForm.isLeaveMsg" @change="toggleLeaveMsg">
          <el-radio label="1">{{$t('public.yes')}}</el-radio>
          <el-radio label="0">{{$t('public.no')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.commentContent')" v-show="ruleForm.isLeaveMsg==='1'">
        <el-input v-model="ruleForm.leavemsgTip" type="textarea" :placeholder="$t('configLazyLoad.channel.commentTip')"></el-input>
        <p>{{$t('configLazyLoad.channel.stopTip4')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.pushContent')" v-show="ruleForm.isLeaveMsg==='0'">
        <el-input v-model="ruleForm.msg" type="textarea" :placeholder="$t('configLazyLoad.channel.stopTip5')"></el-input>
        <p>{{$t('configLazyLoad.channel.stopTip6')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.stopTip7')">
        <el-radio-group v-model="ruleForm.queueNumSwitch">
          <el-radio :label="true">{{$t('public.yes')}}</el-radio>
          <el-radio :label="false">{{$t('public.no')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.stopTip8')">
        <el-radio-group v-model="ruleForm.replaceCustSwitch">
          <el-radio label="1">{{$t('public.yes')}}</el-radio>
          <el-radio label="0">{{$t('public.no')}}</el-radio>
        </el-radio-group>
        <p>{{$t('configLazyLoad.channel.stopTip9')}}</p>
        <div v-show="ruleForm.replaceCustSwitch==='1'">
          <el-radio-group v-model="ruleForm.replaceCustomer">
            <el-radio label="random">{{$t('configLazyLoad.channel.randomChange')}}</el-radio>
            <el-radio label="list">{{$t('configLazyLoad.channel.chooseChange')}}</el-radio>
          </el-radio-group>
          <p>{{$t('configLazyLoad.channel.stopTip9')}}</p>
        </div>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.stopTip11')">
        <el-radio-group v-model="ruleForm.filterSensitiveWords">
          <el-radio label="1">{{$t('public.yes')}}</el-radio>
          <el-radio label="0">{{$t('public.no')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="submit">
        <el-button type="primary" @click="submitForm(ruleForm)" class="primary_btn">{{$t('public.save')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {checkform} from '@/utils/validate'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      let validateNum = (rule, value, callback) => {
        let message = checkform(value, 'Number3')
        if (message) {
          callback(new Error(this.$t(message)))
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          _id: '',
          break_len: '10',
          break_tips_len: '3',
          replaceCustSwitch: '0',
          queueNumSwitch: false,
          replaceCustomer: 'list',
          isLeaveMsg: '0',
          leavemsgTip: '',
          break_tips: '',
          msg: '',
          filterSensitiveWords: '0'
        },
        rules: {
          break_len: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
            {validator: validateNum, trigger: 'blur'}
          ],
          break_tips_len: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
            {validator: validateNum, trigger: 'blur'}
          ]
        }
      }
    },
    components: {
    },
    methods: {
      inti (obj) {
        for (var item in this.ruleForm) {
          this.ruleForm[item] = obj[item] === undefined ? this.ruleForm[item] : obj[item]
        }
      },
      toggleLeaveMsg () {
        this.ruleForm.leavemsgTip = ''
        this.ruleForm.msg = ''
      },
      submitForm (data) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$store.dispatch('saveVisitorSet', data).then(res => {
              if (res && res.success) {
                this.$message.success(this.$t('config.channel.configSuccess'))
              }
            })
          }
        })
      }
    },
    beforeMount () {
      let data = {}
      this.$store.dispatch('getVisitorData', data).then(res => {
        if (res && res.row) {
          this.inti(res.row)
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .visitor
    height calc(100vh - 214px)
    overflow auto
    padding 20px
    .el-form
      width 400px
      .submit
        text-align right
      .el-form-item
        margin-bottom 20px
        .el-input
          color $cf-level3
        p
          font-size 12px
          color $cf-level3
</style>
